<!doctype html>

<html lang="en">
	<head>
		<title>Payment - CookieFlix</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" href="css/payment.css">
		<script src="js/jquery.js"></script>
		<script src="js/init.js"></script>
		<script src="js/user.js"></script>
		
	</head>
	<body>
		<div id="content">
			<h3>Payment page</h3>
			<form id='payment' name='payment-info' ">
				<table>
				<tr>
					<td>First name:</td>
					<td><input type='text' name='fname'></td>
				</tr>
				<tr>
					<td>Last name:</td>
					<td><input type='text' name='lname'></td>
				</tr>
				<tr>
					<td>CC number:</td>
					<td><input type='text' name='ccnum'></td>
				</tr>
				<tr>
					<td>Month:
						<select name='month'>
							<option>01</option>
							<option>02</option>
							<option>03</option>
							<option>04</option>
							<option>05</option>
							<option>06</option>
							<option>07</option>
							<option>08</option>
							<option>09</option>
							<option>10</option>
							<option>11</option>
							<option>12</option>
						</select>
					</td>
					<td>Year:
						<select name='year'>
							<option>2012</option>
							<option>2013</option>
							<option>2014</option>
							<option>2015</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>Street address:</td>
					<td><input type='text' name='addr'></td>
				</tr>
				<tr>
					<td>City:</td>
					<td><input type='text' name='city'></td>
				</tr>
				<tr>
					<td>State:</td>
					<td><select name="state"> 
						<option value="" selected="selected">Select a State</option> 
						<option value="AL">Alabama</option> 
						<option value="AK">Alaska</option> 
						<option value="AZ">Arizona</option> 
						<option value="AR">Arkansas</option> 
						<option value="CA">California</option> 
						<option value="CO">Colorado</option> 
						<option value="CT">Connecticut</option> 
						<option value="DE">Delaware</option> 
						<option value="DC">District Of Columbia</option> 
						<option value="FL">Florida</option> 
						<option value="GA">Georgia</option> 
						<option value="HI">Hawaii</option> 
						<option value="ID">Idaho</option> 
						<option value="IL">Illinois</option> 
						<option value="IN">Indiana</option> 
						<option value="IA">Iowa</option> 
						<option value="KS">Kansas</option> 
						<option value="KY">Kentucky</option> 
						<option value="LA">Louisiana</option> 
						<option value="ME">Maine</option> 
						<option value="MD">Maryland</option> 
						<option value="MA">Massachusetts</option> 
						<option value="MI">Michigan</option> 
						<option value="MN">Minnesota</option> 
						<option value="MS">Mississippi</option> 
						<option value="MO">Missouri</option> 
						<option value="MT">Montana</option> 
						<option value="NE">Nebraska</option> 
						<option value="NV">Nevada</option> 
						<option value="NH">New Hampshire</option> 
						<option value="NJ">New Jersey</option> 
						<option value="NM">New Mexico</option> 
						<option value="NY">New York</option> 
						<option value="NC">North Carolina</option> 
						<option value="ND">North Dakota</option> 
						<option value="OH">Ohio</option> 
						<option value="OK">Oklahoma</option> 
						<option value="OR">Oregon</option> 
						<option value="PA">Pennsylvania</option> 
						<option value="RI">Rhode Island</option> 
						<option value="SC">South Carolina</option> 
						<option value="SD">South Dakota</option> 
						<option value="TN">Tennessee</option> 
						<option value="TX">Texas</option> 
						<option value="UT">Utah</option> 
						<option value="VT">Vermont</option> 
						<option value="VA">Virginia</option> 
						<option value="WA">Washington</option> 
						<option value="WV">West Virginia</option> 
						<option value="WI">Wisconsin</option> 
						<option value="WY">Wyoming</option>
					</select></td>
				</tr>
				<tr colspan="2">
					<td><input type='submit' value='Submit'></td>
				</tr>
				</table>
			</form>
		</div>
		
		<!-- Form validation script -->
		<script>
			$("#payment").submit(function(e) {
				e.preventDefault();
				var valid = true;
				var form = this;
				
				/* verify all input again regular expressions */
				if(form.fname.value == '') {
					alert("First name is invalid.");
					valid = false;
				}
				
				if(form.lname.value == '') {
					alert("Last name is invalid.");
					valid = false;
				}
				
				if(! (/^[0-9]{16}/i.test( form.ccnum.value + '\n'))) {
					alert("Invalid Credit Card number.");
					valid = false;
				}
				
				if( form.year.value <= new Date().getFullYear() && form.month.value <= new Date().getMonth()) {
					alert("Your credit card is expired.");
					valid = false;
				}
				
				if( form.addr.value.length < 5 ) { // arbitrary
					alert("The address you entered is invalid.");
					valid = false;
				}

				if(form.city.value == '') {
					alert("Invalid city name");
					valid = false;
				}
				
				if( form.state.value == "") {
					alert("Please enter a state");
					valid = false;
				}
				
				if( valid ) {
					// add to user's history
					var u = User.read();
					u.addRental( getParameterByName("id") );
					User.write(u);
					
					// go home
					window.location = configs.site_base_url + 'index.html';
				}
			});
			
			function getParameterByName(name) {
				var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
				return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
			}
			
		</script>
	</body>
</html>